<template>
	<view class="content" v-if="!loading">
		<u-navbar
			:title="onlineAudit ? '账号设置' : '支付宝账号'" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="content-page" v-if="!loading && !onlineAudit">
			<view class="text1">
				请添加实名认证名下的支付宝账号
			</view>
			<view class="item flex-a">
				<image class="left-img" src="/static/apliy.jpg"></image>
				<input :value="account" type="text" style="flex: 1 1 0%;" placeholder="请输入支付宝账号"
					@input="accountChanged"/>
			</view>
			<view class="item flex-a" style="align-items: center;">
				<u-icon name="account-fill" size="20" :color="`${mainColor}`"></u-icon>
				<view style="margin-left: 10px;">{{userinfo.real_name}}</view>
			</view>
		</view>
		<view class="content-page" v-if="!loading && onlineAudit">
			<view class="text1">
				请添加实名认证名下的账号
			</view>
			<view class="item flex-a" style="align-items: center;">
				<u-icon name="account-fill" size="20" :color="`${mainColor}`"></u-icon>
				<view style="margin-left: 10px;">{{userinfo.real_name}}</view>
			</view>
			<view class="item flex-a" style="align-items: center;">
				<u-checkbox-group @change="checkChanged">
					<u-checkbox name="checkbox" :checked="defaultAccount" shape="circle"
						:active-color="`${mainColor}`"></u-checkbox>
				</u-checkbox-group>
				<view>默认账户</view>
			</view>
		</view>
		<view class="fix-bottm" :style="{bottom:`${bottomHeight}px`}">
			<u-button :color="`${mainColor}`" shape="circle" @click="doSubmit"
				:custom-style="{color: `${textColor}`}">提交</u-button>
		</view>
	</view>
</template>

<script>
	import token from '@/utils/token';
	import { bindAlipayAccount, userCenter } from '@/api';
	import { systemInfo } from '@/utils/mixin';
	import {mapState} from "vuex";

	export default {
		mixins: [systemInfo],
		data() {
			return {
				loading: false,
				userinfo: {},
				account: '',
				defaultAccount: false
			}
		},
		onLoad() {
			// #ifdef MP-ALIPAY
			my.setNavigationBar({
			    title: this.onlineAudit ? '账号设置' : '支付宝账号'
			})
			// #endif
			this.getSystemInfo();
			this.loadUserInfo();
		},
		computed: mapState(['onlineAudit']),
		methods: {
			async loadUserInfo() {
				if (token.check()) {
					this.userinfo = {};
					this.$store.state.userinfo = {};
					return;
				}
				this.loading = true;
				this.defaultAccount = uni.getStorageSync('defaultAccount', false);
				const res = await userCenter();
				this.loading = false;
				this.userinfo = res.data || {};
				this.$store.state.userinfo = res.data || {};
				this.account = this.userinfo.alipay_account;
				if (!userinfo.real_name) {
					this.setToast('请先实名认证！');
					uni.navigateBack();
				}
			},
			checkChanged(checked) {
				this.defaultAccount = checked.length === 1;
			},
			clickSelection() {
				if (this.selection) {
					this.selection = null;
				} else {
					this.selection = 'test';
				}
			},
			accountChanged({detail}) {
				this.account = detail.value.trim();
			},
			async doSubmit() {
				if (this.onlineAudit) {
					this.setToast("提交成功！");
					uni.setStorageSync('defaultAccount', this.defaultAccount);
					uni.navigateBack();
					return;
				}
				
				if (this.account.length === 0) {
					this.notify('支付宝账号不能为空！');
					return
				}
				
				const res = await bindAlipayAccount(this.account);
				if (res.code === 2000) {
					this.setToast(res.msg);
					uni.navigateBack();
				}
				this.account = '';
			},
			notify(message) {
				uni.showToast({
					icon:'none',
					title:message
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-page {
    padding: 10px 20px 10px;
	
	.text1 {
	    width: 100%;
	    padding-left: 10px;
	    box-sizing: border-box;
	    font-size: 14px;
	    height: 41px;
	    line-height: 41px;
	    color: #e33233;
	    background-color: #fff5f4;
	}
	
	.item {
	    width: 100%;
	    height: 52px;
	    padding-top: 15px;
	    box-sizing: border-box;
	    border-bottom: 1px solid #f1f1f1;
		
		.left-img {
		    position: relative;
		    top: 4px;
		    left: 4px;
		    width: 15px;
		    height: 15px;
		    margin-right: 15px;
		}
	}
}

.fix-bottm {
    position: fixed;
    bottom: 0;
    left: 0;
	right: 0;
    padding: 10px;
    box-sizing: border-box;
}
</style>
